goog.provide('mp.ui.GLayoutElm');

goog.require('goog.fx.DragDrop');
goog.require('goog.fx.DragDropGroup');
goog.require('goog.fx.DragDropItem');
goog.require('goog.fx.Dragger');
goog.require('goog.ui.Control');
goog.require('mp.graphics.Element');
goog.require('mp.ui.GLayoutElmRenderer');

mp.ui.GLayoutElm = function(gElement) {
  goog.base(this, null,
      mp.ui.GLayoutElmRenderer.getInstance(), 
      gElement.getGraphicsImplementation().getDomHelper());

  this.gElement_ = gElement;
  this.setElementInternal(gElement.getWrapper().getElement());

  // Element support the SELECTED state.
  this.setSupportedState(goog.ui.Component.State.SELECTED, true);

  // Elements must dispatch state transition events for the DISABLED and SELECTED
  // states in order for the pane container to function properly.
  this.setDispatchTransitionEvents(
      goog.ui.Component.State.DISABLED | goog.ui.Component.State.SELECTED,
      true);
};
goog.inherits(mp.ui.GLayoutElm, goog.ui.Control);

mp.ui.GLayoutElm.prototype.gElement_;

mp.ui.GLayoutElm.prototype.getGElement = function() {
  return this.gElement_;
}

/** @override */
mp.ui.GLayoutElm.prototype.disposeInternal = function() {
  mp.ui.GLayoutElm.superClass_.disposeInternal.call(this);
}

mp.ui.GLayoutElm.prototype.enterDocument = function() {
  goog.base(this, 'enterDocument');

  if (this.isHandleMouseEvents()) {
    var handler = this.getHandler();
    if (this.isEnabled()) {
      handler.
          listen(this.getElement(), goog.events.EventType.MOUSEDOWN,
              this.handleMouseDown).
          listen(this, goog.ui.Component.EventType.ACTION,
              this.handleActionItem);
    }
  }
  if (this.isEnabled()) {
    // add guest drag
    var drgList = new goog.fx.DragDropGroup();
    var lbls = (lbls = this.getGElement().labels_) || [];
    for (var i = lbls.length - 1; i >= 0; i--) {
      var drgItem = new goog.fx.DragDropItem(lbls[i].getWrapper().getElement(), lbls[i].mpData);
      drgList.addDragDropItem(drgItem);
    };

    var drpList = new goog.fx.DragDropGroup();
    var holders = (holders = this.getGElement().places_) || [];
    for (var i = holders.length - 1; i >= 0; i--) {
      var drpItem = new goog.fx.DragDropItem(holders[i].getWrapper().getElement(), this.getGElement());
      drpList.addDragDropItem(drpItem);
    };

    drgList.createDragElement = function(sourceEl) {
      //console.log(this);
      return goog.dom.createDom('div', 'mp-drag-lbl', goog.dom.getTextContent(sourceEl));
    };

    goog.events.listen(drgList, 'dragstart', this.labelDragStart);
    goog.events.listen(drgList, 'dragend', this.labelDragEnd);
    goog.events.listen(drpList, 'dragover', this.labelDragOver);
    goog.events.listen(drpList, 'dragout', this.labelDragOut);
    goog.events.listen(drpList, 'drop', this.labelDrop);

    drgList.addTarget(drpList);
    drgList.init();
  }
};

mp.ui.GLayoutElm.prototype.getDragGroup = function() {
  var drgGroup = new goog.fx.DragDropGroup();
  var lbls = (lbls = this.getGElement().labels_) || [];
  for (var i = lbls.length - 1; i >= 0; i--) {
    var drgItem = new goog.fx.DragDropItem(lbls[i].getWrapper().getElement(), lbls[i].mpData);
    drgGroup.addDragDropItem(drgItem);
  };  
  return drgGroup;
};

mp.ui.GLayoutElm.prototype.labelDrop = function(event) {
 event.dropTargetItem.element.style.background = 'silver';
 var str = [
   event.dragSourceItem.data,
   ' dropped onto ',
   event.dropTargetItem.data,
   ' at ',
   event.viewportX,
   'x',
   event.viewportY
 ];
 alert(str.join(''));
}

mp.ui.GLayoutElm.prototype.labelDragOver = function(event) {
  event.dropTargetItem.element.style.background = 'red';
  console.log(event);
}

mp.ui.GLayoutElm.prototype.labelDragOut = function(event) {
  event.dropTargetItem.element.style.background = 'silver';
  console.log(event);
}

mp.ui.GLayoutElm.prototype.labelDragStart = function(event) {
  goog.style.setOpacity(event.dragSourceItem.element, 0.3);
}

mp.ui.GLayoutElm.prototype.labelDragEnd = function(event) {
  goog.style.setOpacity(event.dragSourceItem.element, 1.0);
}

mp.ui.GLayoutElm.prototype.handleActionItem = function(e) {
  this.getGElement().graphics_.setSelectionTool(this.getGElement());
}

mp.ui.GLayoutElm.prototype.handleMouseDown = function(e) {
  goog.base(this, 'handleMouseDown', e);
}

// Register a decorator factory function for goog.ui.Buttons.
goog.ui.registry.setDecoratorByClassName(mp.ui.GLayoutElmRenderer.CSS_CLASS,
    function() {
      return new mp.ui.GLayoutElm(null);
    });